<template>
  <div id="big">
    <div v-if="this.number!==0" style="position:absolute;left: 45%"> <h4>验证码过期时间</h4>
      <el-progress type="line" :percentage="this.number"></el-progress>
    </div>
    <div v-else style="position:absolute;left: 45%"> <h4>已过期</h4>
    </div>


    <div style="background:rgba(225,225,225,0.5);width: 500px;height: 350px;position: relative;left: 35%;top: 25%;border-radius: 40px">
      <img src="../assets/img/loginImg/ren.jpg"
           style="width: 100px;height: 100px;border-radius: 50px;position: absolute;top: -15%;left: 40%">
      <el-input style="width: 60% ;position: relative;left: 20%;top: 20%"
        placeholder="请输入电话号码"
        v-model="id"
        clearable>
      </el-input>
      <el-input style="width: 60% ;position: relative;left: 20%;top: 24%;margin-bottom: 10px"
        placeholder="请输入密码" v-model="password" show-password></el-input>
      <div style="position: relative;top: 25%;left:20%;width: 60%;height: 40px;display: flex" >
        <el-input v-model="code" placeholder="请输入验证码"></el-input>
          <img @click="handleLoad" :src='this.codeUrl' alt="">

      </div>

      <el-checkbox v-model="checked" style="position: relative;left: 20%;top: 30%" @click="setCookie">记住密码</el-checkbox>
      <p @click="logon()" style="position: relative;left: 60%;top: 19%;color: cornflowerblue;cursor: pointer">没有账号？</p>
      <el-button type="primary" @click="addAxios" style="position: relative;left: 20%;top: 20%;width: 60%">登录</el-button>

    </div>

  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "login",
  data(){
    return{
      id:"",
      password:"",
      code:"",
      checked:false,
      codeUrl:"http://localhost:8080/kaptcha",
      number:60,
      sett:""

    }
  },
  created() {
    this.getCookie()
    this.setTimer()
  },
  methods:{
    setTimer(){
      if (this.number>0){
        this.sett = setInterval(()=>{
          this.number--
          if (this.number<=0){
            clearInterval(this.sett)
            this.$message({
              message:"验证码已经过期请重新生成",
              type:'warning'
            })
          }
        },1000)
      }
    },
    handleLoad(){
      this.codeUrl ="http://localhost:8080/kaptcha?"+Math.floor(Math.random()*1000)
      this.number = 60
    },
    setCookie(){
      if (this.checked==true){
        this.$cookies.set("username",this.id)//后面还可以加个数字来设置存在cookie里多长时间
        this.$cookies.set("password",this.password)
      }else {
        this.$cookies.set("username","")//后面还可以加个数字来设置存在cookie里多长时间
        this.$cookies.set("password","")
      }
    },
    getCookie(){
      if (this.$cookies.get("password")){
        this.checked = true
      }
      if (this.$cookies.get("username")){
        this.id = this.$cookies.get("username")
      }
      if (this.$cookies.get("password")){
        this.password = this.$cookies.get("password")
      }
    },
    addAxios(){
      if (this.id == null||this.id == ""){
        this.$message({
          message:"账号不能为空",
          type:"warning",
        })
      }else if (this.password == null||this.password == "" ){
        this.$message({
          message:"密码不能为空",
          type:"warning"
        })
      }
      else if(this.code == null ||this.code ==""){
        this.$message({
          message:"验证码不能为空",
          type:"warning"
        })
      }
      else {
        axios({
          url:"/my/login",
          method:'get',
          params:{
            id : this.id   ,
            password:this.password,
            code : this.code
          }
        }).then(res=>{
          console.log(res.data)
          if (res.data == true){
            clearInterval(this.sett)
            this.$message({
              message:"登录成功",
              type:"success"
            })
            this.setCookie()
            this.$cookies.set("call1",this.id)
            this.$router.push("/homePage")
          }else {
            this.$message({
              message:"账号密码出错误",
              type:"error"
            })
          }

        }).catch(resp=>{

          console.log(resp)
        })
      }

    },
    logon(){
      this.$router.push("/logon")
    }
  }
}
</script>

<style scoped>
#big{
  background: url("../assets/img/loginImg/bj.jpg");
  width: 100%;
  height: 1080px;
  background-repeat: no-repeat;
  background-size:cover ;
  overflow: hidden;
}
</style>
